<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - ListField Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/fonts/fonts-min.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

 <body>

<p class='demoTitle'>inputEx - ListField Usage</p>


<!-- Example 1 -->
<div class='exampleDiv'>

	<p class="title">Basic ListField creation</p>
	
	<p>Use the following code to create a basic inputEx ListField.</p>

	<div class='demoContainer' id='container1'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var exampleDiv = YAHOO.util.Dom.get('container1');
			var field = new YAHOO.inputEx.ListField({
				name: 'websiteUrl', 
				listLabel: 'Websites',
				elementType: {type: 'url'},
				value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], 
				parentEl: exampleDiv
			});
			var button = YAHOO.inputEx.cn('button', null, null, 'getValue()');
			exampleDiv.appendChild(button); 
			YAHOO.util.Event.addListener(button, 'click', function() { alert( YAHOO.lang.JSON.stringify(field.getValue())); });  
			var button2 = YAHOO.inputEx.cn('button', null, null, 'setValue()');
			exampleDiv.appendChild(button2); 
			YAHOO.util.Event.addListener(button2, 'click', function() {
				field.setValue(['http://www.sncf.com',
												'http://www.clicrdv.com',
												'http://www.neyric.com',
												'http://javascript.neyric.com/wireit']);
			var button3 = YAHOO.inputEx.cn('button', null, null, 'Clear');
			exampleDiv.appendChild(button3); 
			YAHOO.util.Event.addListener(button3, 'click', function() {
				field.setValue([]);
			});
		</textarea>
	</div>

</div>


<!-- Example 2 -->
<div class='exampleDiv'>

	<p class="title">Sortable list</p>
	
	<p>Example for the sortable ListField</p>

	<div class='demoContainer' id='container2'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript">
			var field2 = new YAHOO.inputEx.ListField({
				listLabel: 'Reorder example',
				elementType: {type: 'string'},
				value: ['one', 'two', 'three', 'four'], 
				parentEl: 'container2',
				sortable: true
			});
			var buttonGetValue = inputEx.cn('button', null, null, 'getValue()');
			YAHOO.util.Dom.get('container2').appendChild(buttonGetValue); 
			YAHOO.util.Event.addListener(buttonGetValue, 'click', function() { 
				alert( YAHOO.lang.JSON.stringify(field2.getValue())); 
			});
		</textarea>
	</div>

</div>


<!-- Example 3 -->
<div class='exampleDiv'>

	<p class="title">Updated event</p>
	
	<p>How to listen to the updated event :</p>

	<div class='demoContainer' id='container3'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
			var el = YAHOO.util.Dom.get('container3');
			var field = new YAHOO.inputEx.ListField({parentEl: el, value: ["one", "two", "three", "four"], sortable: true });
			var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
			el.appendChild(logDiv);
			field.updatedEvt.subscribe(function() {
				logDiv.innerHTML += "Updated at "+(new Date())+"<br />";
			});
		</textarea>
	</div>

</div>


<!-- Example 4 -->
<div class='exampleDiv'>

	<p class="title">Use buttons instead of links</p>
	
	<p>Use buttons :</p>

	<div class='demoContainer' id='container4'></div>

	<div class='codeContainer'>
		<textarea name="code" class="JScript" cols="60" rows="1">
			new YAHOO.inputEx.ListField({
				listLabel: 'Websites',
				elementType: {type: 'select', inputParams:{ selectValues:  ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com', 'http://javascript.neyric.com/blog', 'http://javascript.neyric.com/wireit', 'http://javascript.neyric.com/inputex']} },
				value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], 
				parentEl: 'container4',
				useButtons: true // set to true to display buttons instead of links
			});
		</textarea>
	</div>

</div>

<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/yahoo/yahoo-min.js"></script> 
<script type="text/javascript" src="../lib/yui/dom/dom-min.js"></script> 
<script type="text/javascript" src="../lib/yui/event/event-min.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/json/json-min.js"></script>
<script type="text/javascript" src="../lib/yui/animation/animation-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/fields/UrlField.js"  type='text/javascript'></script>
<script src="../js/fields/ListField.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>

<script>

YAHOO.util.Event.addListener(window, 'load', function() {
	// Required for the ListField
	YAHOO.inputEx.spacerUrl = "../images/space.gif";

	// Example 1
	var exampleDiv = YAHOO.util.Dom.get('container1');
	var field = new YAHOO.inputEx.ListField({
		name: 'websiteUrl', 
		listLabel: 'Websites',
		elementType: {type: 'url'},
		value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], 
		parentEl: exampleDiv
	});
	var button = YAHOO.inputEx.cn('button', null, null, 'getValue()');
	exampleDiv.appendChild(button); 
	YAHOO.util.Event.addListener(button, 'click', function() { alert( YAHOO.lang.JSON.stringify(field.getValue())); });  
	var button2 = YAHOO.inputEx.cn('button', null, null, 'setValue()');
	exampleDiv.appendChild(button2); 
	YAHOO.util.Event.addListener(button2, 'click', function() {
		field.setValue(['http://www.sncf.com',
										'http://www.clicrdv.com',
										'http://www.neyric.com',
										'http://javascript.neyric.com/wireit']);			
	});
	var button3 = YAHOO.inputEx.cn('button', null, null, 'Clear');
	exampleDiv.appendChild(button3); 
	YAHOO.util.Event.addListener(button3, 'click', function() {
		field.setValue([]);
	});
	
	// Example 2
	var field2 = new YAHOO.inputEx.ListField({
		listLabel: 'Reorder example',
		elementType: {type: 'string'},
		value: ['one', 'two', 'three', 'four'], 
		parentEl: 'container2',
		sortable: true
	});
	var buttonGetValue = YAHOO.inputEx.cn('button', null, null, 'getValue()');
	YAHOO.util.Dom.get('container2').appendChild(buttonGetValue); 
	YAHOO.util.Event.addListener(buttonGetValue, 'click', function() { 
		alert( YAHOO.lang.JSON.stringify(field2.getValue())); 
	});
	
	
	// Example 3
	var el3 = YAHOO.util.Dom.get('container3');
	var field3 = new YAHOO.inputEx.ListField({parentEl: el3, value: ["one", "two", "three", "four"], sortable: true });
	var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />");
	el3.appendChild(logDiv);
	field3.updatedEvt.subscribe(function(e,params) {
		var value = params[0];
		logDiv.innerHTML += "Updated at "+(new Date())+" with value "+YAHOO.lang.JSON.stringify(value)+"<br />";
	});
	
	
	// Example 4
	new YAHOO.inputEx.ListField({
		listLabel: 'Websites',
		elementType: {type: 'select', inputParams:{ selectValues:  ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com', 'http://javascript.neyric.com/blog', 'http://javascript.neyric.com/wireit', 'http://javascript.neyric.com/inputex']} },
		value: ['http://www.neyric.com', 'http://www.ajaxian.com', 'http://www.google.com', 'http://www.yahoo.com'], 
		parentEl: 'container4',
		useButtons: true // set to true to display buttons instead of links
	});
	
});

</script>

<script src="js/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code');
</script>

 </body>
</html>